<!--
 * @Description: 底部第三个
 * @Author: Ronda
 * @Date: 2022-02-16 09:30:08
 * @LastEditors: Ronda
 * @LastEditTime: 2022-05-18 17:24:44
-->
<template>
  <div><div ref="container" style="height: 150px"></div></div>
</template>

<script>
import { Area } from '@antv/g2plot';

export default {
  data() {
    return {};
  },
  computed: {},
  methods: {createArea(){
    fetch('https://gw.alipayobjects.com/os/bmw-prod/b21e7336-0b3e-486c-9070-612ede49284e.json')
  .then((res) => res.json())
  .then((data) => {
    const area = new Area(this.$refs.container, {
      data,
      xField: 'date',
      yField: 'value',
      seriesField: 'country',
    });
    area.render();
  });
  }},
  created() {},
  mounted() {this.createArea()},
};
</script>
<style scoped>
</style>